<!DOCTYPE html>
<!-- saved from url=(0075)https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- Title -->
  <title>Portfolio - Boxed Card | Front - Responsive Website Template</title>

  <!-- Required Meta Tags Always Come First -->
  
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

  <!-- Favicon -->
  <link rel="shortcut icon" href="https://htmlstream.com/preview/front-v1.2/favicon.ico">

  <!-- Google Fonts -->
  <link href="./Template_files/css" rel="stylesheet">

  <!-- CSS Global Compulsory -->
  <link rel="stylesheet" href="./Template_files/bootstrap.css">

  <!-- CSS Implementing Plugins -->
  <link rel="stylesheet" href="./Template_files/fontawesome-all.min.css">
  <link rel="stylesheet" href="./Template_files/animate.min.css">
  <link rel="stylesheet" href="./Template_files/hs.megamenu.css">
  <link rel="stylesheet" href="./Template_files/jquery.mCustomScrollbar.css">
  <link rel="stylesheet" href="./Template_files/cubeportfolio.min.css">

  <!-- CSS Front Template -->
  <link rel="stylesheet" href="./Template_files/front.css">
<link rel="stylesheet" href="./Template_files/font.css">
</head>

<body>
  <!-- Skippy -->
  <a id="skippy" class="sr-only sr-only-focusable u-skippy" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#content">
    <div class="container">
      <span class="u-skiplink-text">Skip to main content</span>
    </div>
  </a>
  <!-- End Skippy -->

  <!-- ========== HEADER ========== -->
  <header id="header" class="u-header u-header--abs-top-md u-header--show-hide-md u-scrolled js-header-fix-moment" data-header-fix-moment="500" data-header-fix-effect="slide">
    <!-- Search -->
    <div id="searchPushTop" class="u-search-push-top u-unfold--jquery-slide u-unfold--hidden" style="display: none;">
      <div class="container position-relative">
        <div class="u-search-push-top__content mx-auto">
          <!-- Close Button -->
          <button type="button" class="close u-search-push-top__close-btn target-of-invoker-has-unfolds" aria-haspopup="true" aria-expanded="false" aria-controls="searchPushTop" data-unfold-type="jquery-slide" data-unfold-target="#searchPushTop">
            <span aria-hidden="true">×</span>
          </button>
          <!-- End Close Button -->

          <!-- Input -->
          <form class="js-focus-state input-group input-group-lg u-form u-form--lg u-form--no-brd">
            <input type="search" class="form-control u-form__input" placeholder="Search Front" aria-label="Search Front">
            <div class="input-group-append">
              <button type="button" class="btn btn-primary u-btn-primary">Search</button>
            </div>
          </form>
          <!-- End Input -->

          <!-- Link Lists -->
          <div class="row d-none d-md-flex mt-7">
            <div class="col-sm-6">
              <strong class="d-block mb-2">Quick Links</strong>

              <div class="row">
                <!-- List -->
                <ul class="col-sm-6 list-unstyled u-list">
                  <li>
                    <a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">
                      <span class="fa fa-angle-right u-list__link-icon mr-1"></span>
                      Search Results List
                    </a>
                  </li>
                  <li>
                    <a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">
                      <span class="fa fa-angle-right u-list__link-icon mr-1"></span>
                      Search Results Grid
                    </a>
                  </li>
                  <li>
                    <a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/pages/about-agency.html">
                      <span class="fa fa-angle-right u-list__link-icon mr-1"></span>
                      About
                    </a>
                  </li>
                  <li>
                    <a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/pages/services-agency.html">
                      <span class="fa fa-angle-right u-list__link-icon mr-1"></span>
                      Services
                    </a>
                  </li>
                  <li>
                    <a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">
                      <span class="fa fa-angle-right u-list__link-icon mr-1"></span>
                      Invoice
                    </a>
                  </li>
                </ul>
                <!-- End List -->

                <!-- List -->
                <ul class="col-sm-6 list-unstyled u-list">
                  <li>
                    <a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">
                      <span class="fa fa-angle-right u-list__link-icon mr-1"></span>
                      Profile
                    </a>
                  </li>
                  <li>
                    <a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">
                      <span class="fa fa-angle-right u-list__link-icon mr-1"></span>
                      User Contacts
                    </a>
                  </li>
                  <li>
                    <a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">
                      <span class="fa fa-angle-right u-list__link-icon mr-1"></span>
                      Reviews
                    </a>
                  </li>
                  <li>
                    <a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">
                      <span class="fa fa-angle-right u-list__link-icon mr-1"></span>
                      Settings
                    </a>
                  </li>
                </ul>
                <!-- End List -->
              </div>
            </div>

            <div class="col-sm-6">
              <!-- Banner -->
              <div class="rounded u-search-push-top__banner">
                <div class="d-flex align-items-center">
                  <div class="u-search-push-top__banner-container">
                    <img class="img-fluid u-search-push-top__banner-img" src="./Template_files/img3.png" alt="Image Description">
                    <img class="img-fluid u-search-push-top__banner-img" src="./Template_files/img2.png" alt="Image Description">
                  </div>

                  <div>
                    <div class="mb-4">
                      <strong class="d-block mb-2">Featured Item</strong>
                      <p>Create astonishing web sites and pages.</p>
                    </div>
                    <a class="btn btn-xs u-btn-success--air transition-3d-hover" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/index.html">Apply Now <span class="fa fa-angle-right ml-2"></span></a>
                  </div>
                </div>
              </div>
              <!-- End Banner -->
            </div>
          </div>
          <!-- End Link Lists -->
        </div>
      </div>
    </div>
    <!-- End Search -->

    <div class="u-header__section">
      <!-- Topbar -->
      <div class="container u-header__hide-content pt-2">
        <div class="d-flex align-items-center mb-0">
          <!-- Language -->
          <div class="position-relative">
            <a id="languageDropdownInvoker" class="d-flex align-items-center u-unfold-wrapper" href="javascript:;" role="button" aria-controls="languageDropdown" aria-haspopup="true" aria-expanded="false" data-unfold-event="hover" data-unfold-target="#languageDropdown" data-unfold-type="css-animation" data-unfold-duration="300" data-unfold-delay="300" data-unfold-hide-on-scroll="true" data-unfold-animation-in="slideInUp" data-unfold-animation-out="fadeOut">
               <img class="u-unfold__icon" src="./Template_files/us.svg" alt="SVG">
              <span class="d-inline-block d-sm-none">US</span>
              <span class="d-none d-sm-inline-block">United States</span>
              <span class="fa fa-angle-down u-unfold__icon-pointer"></span>
            </a>

            <div id="languageDropdown" class="u-unfold mt-2 u-unfold--css-animation u-unfold--hidden fadeOut" aria-labelledby="languageDropdownInvoker" style="animation-duration: 300ms;">
              <a class="active u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">English</a>
              <a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">Deutsch</a>
              <a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">Español‎</a>
            </div>
          </div>
          <!-- End Language -->

          <div class="ml-auto">
            <!-- Jump To -->
            <div class="d-inline-block d-sm-none position-relative mr-2">
              <a id="jumpToDropdownInvoker" class="d-flex align-items-center u-unfold-wrapper" href="javascript:;" role="button" aria-controls="jumpToDropdown" aria-haspopup="true" aria-expanded="false" data-unfold-event="hover" data-unfold-target="#jumpToDropdown" data-unfold-type="css-animation" data-unfold-duration="300" data-unfold-delay="300" data-unfold-hide-on-scroll="true" data-unfold-animation-in="slideInUp" data-unfold-animation-out="fadeOut">
                Jump to
                <span class="fa fa-angle-down u-unfold__icon-pointer"></span>
              </a>

              <div id="jumpToDropdown" class="u-unfold mt-2 u-unfold--css-animation u-unfold--hidden fadeOut" aria-labelledby="jumpToDropdownInvoker" style="animation-duration: 300ms;">
                <a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/pages/help.html">Help</a>
                <a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/pages/contacts-agency.html">Contacts</a>
              </div>
            </div>
            <!-- End Jump To -->

            <!-- Links -->
            <div class="d-none d-sm-inline-block ml-sm-auto">
              <ul class="list-inline mb-0">
                <li class="list-inline-item mr-0">
                  <a class="u-header__topbar-nav-link" href="https://htmlstream.com/preview/front-v1.2/html/pages/help.html">Help</a>
                </li>
                <li class="list-inline-item mr-0">
                  <a class="u-header__topbar-nav-link" href="https://htmlstream.com/preview/front-v1.2/html/pages/contacts-agency.html">Contacts</a>
                </li>
              </ul>
            </div>
            <!-- End Links -->
          </div>

          <ul class="list-inline ml-2 mb-0">
            <!-- Search -->
            <li class="list-inline-item">
              <a class="btn btn-xs u-btn--icon u-btn-text-secondary target-of-invoker-has-unfolds" href="javascript:;" role="button" aria-haspopup="true" aria-expanded="false" aria-controls="searchPushTop" data-unfold-type="jquery-slide" data-unfold-target="#searchPushTop">
                <span class="fa fa-search u-btn--icon__inner"></span>
              </a>
            </li>
            <!-- End Search -->

            <!-- Shopping Cart -->
            <li class="list-inline-item position-relative">
              <a id="shoppingCartDropdownInvoker" class="btn btn-xs u-btn--icon u-btn-text-secondary" href="javascript:;" role="button" aria-controls="shoppingCartDropdown" aria-haspopup="true" aria-expanded="false" data-unfold-event="hover" data-unfold-target="#shoppingCartDropdown" data-unfold-type="css-animation" data-unfold-duration="300" data-unfold-delay="300" data-unfold-hide-on-scroll="true" data-unfold-animation-in="slideInUp" data-unfold-animation-out="fadeOut">
                <span class="fa fa-shopping-cart u-btn--icon__inner"></span>
              </a>

              <div id="shoppingCartDropdown" class="text-center u-unfold right-0 p-7 mt-2 u-unfold--css-animation u-unfold--hidden fadeOut" aria-labelledby="shoppingCartDropdownInvoker" style="min-width: 250px; animation-duration: 300ms;">
                <span class="u-shopping-cart-icon mb-4">
                  <span class="fa fa-shopping-basket u-shopping-cart-icon__inner"></span>
                </span>
                <span class="d-block">Your Cart is Empty</span>
              </div>
            </li>
            <!-- End Shopping Cart -->

            <!-- Account Login -->
            <li class="list-inline-item">
              <!-- Account Sidebar Toggle Button -->
              <a id="sidebarNavToggler" class="btn btn-xs u-btn--icon u-btn-text-secondary u-sidebar__toggler target-of-invoker-has-unfolds" href="javascript:;" role="button" aria-controls="sidebarContent" aria-haspopup="true" aria-expanded="false" data-unfold-event="click" data-unfold-hide-on-scroll="false" data-unfold-target="#sidebarContent" data-unfold-type="css-animation" data-unfold-animation-in="fadeInRight" data-unfold-animation-out="fadeOutRight" data-unfold-duration="500">
                <span class="fa fa-user-circle u-btn--icon__inner font-size-14"></span>
              </a>
              <!-- End Account Sidebar Toggle Button -->
            </li>
            <!-- End Account Login -->
          </ul>
        </div>
      </div>
      <!-- End Topbar -->

      <div id="logoAndNav" class="container">
        <!-- Nav -->
        <nav class="js-mega-menu navbar navbar-expand-md u-header__navbar hs-menu-initialized hs-menu-horizontal">
          <!-- Logo -->
          <a class="navbar-brand u-header__navbar-brand u-header__navbar-brand-top-space" href="https://htmlstream.com/preview/front-v1.2/html/home/index.html" aria-label="Front">
            <img src="./Template_files/logo.svg" alt="Logo">
          </a>
          <!-- End Logo -->

          <!-- Responsive Toggle Button -->
          <button type="button" class="navbar-toggler btn u-hamburger" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navBar" data-toggle="collapse" data-target="#navBar">
            <span id="hamburgerTrigger" class="u-hamburger__box">
              <span class="u-hamburger__inner"></span>
            </span>
          </button>
          <!-- End Responsive Toggle Button -->

          <!-- Navigation -->
          <div id="navBar" class="collapse navbar-collapse py-0">
            <ul class="navbar-nav u-header__navbar-nav ml-lg-auto">
              <!-- Home -->
              <li class="nav-item hs-has-mega-menu u-header__nav-item" data-event="hover" data-animation-in="slideInUp" data-animation-out="fadeOut" data-position="left">
                <a id="homeMegaMenu" class="nav-link u-header__nav-link pl-0" href="javascript:;" aria-haspopup="true" aria-expanded="false">
                  Home
                  <span class="fa fa-angle-down u-header__nav-link-icon"></span>
                </a>

                <!-- Home - Mega Menu -->
                <div class="hs-mega-menu u-header__sub-menu w-100 u-header__mega-menu-wrapper-v2" aria-labelledby="homeMegaMenu" style="display: none;">
                  <div class="row p-0 mr-0">
                    <div class="col-lg-6 pr-0">
                      <!-- Banner Image -->
                      <div class="d-none d-lg-block u-header__banner-v1" data-bg-img-src="../../assets/img/750x750/img1.jpg" style="background-image: url('../../assets/img/750x750/img1.jpg');">
                        <div class="w-100 text-center u-header__banner-v1-content u-content-centered-y p-4">
                          <div class="mb-4">
                            <strong class="d-block u-header__banner-v1-title mb-2">Branding Works</strong>
                            <span class="u-header__banner-v1-text">Experience a level of our quality in both design &amp; customization works.</span>
                          </div>
                          <a class="btn btn-primary u-btn-primary btn-sm transition-3d-hover" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">Learn More <span class="fa fa-angle-right ml-2"></span></a>
                        </div>
                      </div>
                      <!-- End Banner Image -->
                    </div>

                    <div class="col-lg-6 u-header__mega-menu-wrapper-v3">
                      <div class="row u-header__mega-menu-wrapper-v1">
                        <div class="col-sm-6">
                          <strong class="d-block mb-2">Classic</strong>

                          <!-- Links -->
                          <ul class="list-unstyled mb-4">
                            <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/home/index.html">Classic Agency</a></li>
                            <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/home/classic-crypto.html">Classic Crypto</a></li>
                            <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/home/classic-business.html">Classic Business</a></li>
                            <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/home/classic-marketing.html">Classic Marketing</a></li>
                            <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/home/classic-consulting.html">Classic Consulting</a></li>
                          </ul>
                          <!-- End Links -->

                          <strong class="d-block mb-2">Corporate</strong>

                          <!-- Links -->
                          <ul class="list-unstyled mb-4">
                            <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/home/corporate-agency.html">Corporate Agency</a></li>
                            <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/home/corporate-start-up.html">Corporate Start-Up</a></li>
                            <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/home/corporate-business.html">Corporate Business <span class="badge badge-success ml-1">New</span></a></li>
                          </ul>
                          <!-- End Links -->
                        </div>

                        <div class="col-sm-6">
                          <strong class="d-block mb-2">Landing</strong>

                          <!-- Links -->
                          <ul class="list-unstyled mb-4">
                            <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/home/landing-house.html">Landing House <span class="badge badge-success ml-1">New</span></a></li>
                            <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/home/landing-job.html">Landing Job <span class="badge badge-success ml-1">New</span></a></li>
                          </ul>
                          <!-- End Links -->

                          <strong class="d-block mb-2">Blog</strong>

                          <!-- Links -->
                          <ul class="list-unstyled mb-4">
                            <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/home/blog-agency.html">Blog Agency</a></li>
                            <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/home/blog-start-up.html">Blog Start-Up</a></li>
                            <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/home/blog-business.html">Blog Business</a></li>
                          </ul>
                          <!-- End Links -->

                          <strong class="d-block mb-2">Portfolio</strong>

                          <!-- Links -->
                          <ul class="list-unstyled u-list">
                            <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/home/portfolio-agency.html">Portfolio Agency</a></li>
                            <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/home/portfolio-profile.html">Portfolio Profile</a></li>
                          </ul>
                          <!-- End Links -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Home - Mega Menu -->
              </li>
              <!-- End Home -->

              <!-- Pages -->
              <li class="nav-item hs-has-sub-menu u-header__nav-item" data-event="hover" data-animation-in="slideInUp" data-animation-out="fadeOut">
                <a id="pagesMegaMenu" class="nav-link u-header__nav-link" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-labelledby="pagesSubMenu">
                  Pages
                  <span class="fa fa-angle-down u-header__nav-link-icon"></span>
                </a>

                <!-- Pages - Submenu -->
                <ul id="pagesSubMenu" class="list-inline hs-sub-menu u-header__sub-menu py-3 mb-0" style="min-width: 220px; display: none;" aria-labelledby="pagesMegaMenu">
                  <!-- About -->
                  <li class="dropdown-item hs-has-sub-menu">
                    <a id="navLinkPagesAbout" class="nav-link u-header__sub-menu-nav-link u-list__link py-2" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesAbout">
                      About
                      <span class="fa fa-angle-right u-header__sub-menu-nav-link-icon"></span>
                    </a>

                    <!-- Submenu (level 2) -->
                    <ul id="navSubmenuPagesAbout" class="hs-sub-menu list-unstyled u-header__sub-menu u-header__sub-menu-menu-gutter--y u-header__sub-menu-offset" style="min-width: 220px; display: none;" aria-labelledby="navLinkPagesAbout">
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/pages/about-agency.html">About Agency</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/pages/about-start-up.html">About Start-Up</a>
                      </li>
                    </ul>
                    <!-- End Submenu (level 2) -->
                  </li>
                  <!-- About -->

                  <!-- Services -->
                  <li class="dropdown-item hs-has-sub-menu">
                    <a id="navLinkPagesServices" class="nav-link u-header__sub-menu-nav-link u-list__link py-2" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesServices">
                      Services
                      <span class="fa fa-angle-right u-header__sub-menu-nav-link-icon"></span>
                    </a>

                    <!-- Submenu (level 2) -->
                    <ul id="navSubmenuPagesServices" class="hs-sub-menu list-unstyled u-header__sub-menu u-header__sub-menu-menu-gutter--y u-header__sub-menu-offset" style="min-width: 220px; display: none;" aria-labelledby="navLinkPagesServices">
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/pages/services-agency.html">Services Agency</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/pages/services-start-up.html">Services Start-Up</a>
                      </li>
                    </ul>
                    <!-- End Submenu (level 2) -->
                  </li>
                  <!-- Services -->

                  <!-- Careers -->
                  <li class="dropdown-item hs-has-sub-menu">
                    <a id="navLinkPagesCareers" class="nav-link u-header__sub-menu-nav-link u-list__link py-2" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesCareers">
                      Careers
                      <span class="fa fa-angle-right u-header__sub-menu-nav-link-icon"></span>
                    </a>

                    <!-- Submenu (level 2) -->
                    <ul id="navSubmenuPagesCareers" class="hs-sub-menu list-unstyled u-header__sub-menu u-header__sub-menu-menu-gutter--y u-header__sub-menu-offset" style="min-width: 220px; display: none;" aria-labelledby="navLinkPagesCareers">
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/pages/careers.html">Careers</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/pages/careers-single.html">Careers Single</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/pages/hire-us.html">Hire Us</a>
                      </li>
                    </ul>
                    <!-- End Submenu (level 2) -->
                  </li>
                  <!-- Careers -->

                  <!-- Login -->
                  <li class="dropdown-item hs-has-sub-menu">
                    <a id="navLinkPagesLogin" class="nav-link u-header__sub-menu-nav-link u-list__link py-2" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesLogin">
                      Login &amp; Signup
                      <span class="fa fa-angle-right u-header__sub-menu-nav-link-icon"></span>
                    </a>

                    <!-- Submenu (level 2) -->
                    <ul id="navSubmenuPagesLogin" class="hs-sub-menu list-unstyled u-header__sub-menu u-header__sub-menu-menu-gutter--y u-header__sub-menu-offset" style="min-width: 220px; display: none;" aria-labelledby="navLinkPagesLogin">
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/pages/login-simple.html">Login Simple</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/pages/signup-simple.html">Signup Simple</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/pages/recover-account.html">Recover Account</a>
                      </li>
                    </ul>
                    <!-- End Submenu (level 2) -->
                  </li>
                  <!-- Signup -->

                  <!-- Contacts -->
                  <li class="dropdown-item hs-has-sub-menu">
                    <a id="navLinkContactsServices" class="nav-link u-header__sub-menu-nav-link u-list__link py-2" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuContactsServices">
                      Contacts
                      <span class="fa fa-angle-right u-header__sub-menu-nav-link-icon"></span>
                    </a>

                    <!-- Submenu (level 2) -->
                    <ul id="navSubmenuContactsServices" class="hs-sub-menu list-unstyled u-header__sub-menu u-header__sub-menu-menu-gutter--y u-header__sub-menu-offset" style="min-width: 220px; display: none;" aria-labelledby="navLinkContactsServices">
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/pages/contacts-agency.html">Contacts Agency</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/pages/contacts-start-up.html">Contacts Start-Up</a>
                      </li>
                    </ul>
                    <!-- End Submenu (level 2) -->
                  </li>
                  <!-- Contacts -->

                  <!-- Utilities -->
                  <li class="dropdown-item hs-has-sub-menu">
                    <a id="navLinkPagesUtilities" class="nav-link u-header__sub-menu-nav-link u-list__link py-2" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesUtilities">
                      Utilities
                      <span class="fa fa-angle-right u-header__sub-menu-nav-link-icon"></span>
                    </a>

                    <!-- Submenu (level 2) -->
                    <ul id="navSubmenuPagesUtilities" class="hs-sub-menu list-unstyled u-header__sub-menu u-header__sub-menu-menu-gutter--y u-header__sub-menu-offset" style="min-width: 220px; display: none;" aria-labelledby="navLinkPagesUtilities">
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/pages/help.html">Help</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/pages/pricing.html">Pricing</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/pages/terms.html">Terms &amp; Conditions</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/pages/privacy.html">Privacy &amp; Policy</a>
                      </li>
                    </ul>
                    <!-- End Submenu (level 2) -->
                  </li>
                  <!-- Utilities -->

                  <!-- Specialty -->
                  <li class="dropdown-item hs-has-sub-menu">
                    <a id="navLinkPagesSpecialty" class="nav-link u-header__sub-menu-nav-link u-list__link py-2" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesSpecialty">
                      Specialty
                      <span class="fa fa-angle-right u-header__sub-menu-nav-link-icon"></span>
                    </a>

                    <!-- Submenu (level 2) -->
                    <ul id="navSubmenuPagesSpecialty" class="hs-sub-menu list-unstyled u-header__sub-menu u-header__sub-menu-menu-gutter--y u-header__sub-menu-offset" style="min-width: 220px; display: none;" aria-labelledby="navLinkPagesSpecialty">
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/pages/cover-page.html">Cover Page</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/pages/coming-soon.html">Coming Soon</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/pages/maintenance-mode.html">Maintenance Mode</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/pages/error-404.html">Error 404</a>
                      </li>
                    </ul>
                    <!-- End Submenu (level 2) -->
                  </li>
                  <!-- Specialty -->
                </ul>
                <!-- End Pages - Submenu -->
              </li>
              <!-- End Pages -->

              <!-- Works -->
              <li class="nav-item hs-has-mega-menu u-header__nav-item" data-event="hover" data-animation-in="slideInUp" data-animation-out="fadeOut" data-position="right">
                <a id="worksMegaMenu" class="nav-link u-header__nav-link" href="javascript:;" aria-haspopup="true" aria-expanded="false">
                  Work
                  <span class="fa fa-angle-down u-header__nav-link-icon"></span>
                </a>

                <!-- Works - Mega Menu -->
                <div class="hs-mega-menu w-100 u-header__sub-menu u-header__mega-menu-wrapper-v1" aria-labelledby="worksMegaMenu" style="display: none;">
                  <div class="row">
                    <div class="col-sm-6 col-lg-3 mb-3 mb-lg-0">
                      <strong class="d-block mb-2">Boxed Layouts</strong>

                      <!-- Links -->
                      <ul class="list-unstyled u-list">
                        <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html">Portfolio Classic</a></li>
                        <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-grid.html">Portfolio Grid</a></li>
                        <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-masonry.html">Portfolio Masonry</a></li>
                        <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-modern.html">Portfolio Modern</a></li>
                      </ul>
                      <!-- End Links -->
                    </div>

                    <div class="col-sm-6 col-lg-3 mb-3 mb-lg-0">
                      <strong class="d-block mb-2">Full Width Layouts</strong>

                      <!-- Links -->
                      <ul class="list-unstyled u-list">
                        <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/fullwidth-classic.html">Portfolio Classic</a></li>
                        <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/fullwidth-grid.html">Portfolio Grid</a></li>
                        <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/fullwidth-masonry.html">Portfolio Masonry</a></li>
                        <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/fullwidth-modern.html">Portfolio Modern</a></li>
                      </ul>
                      <!-- End Links -->
                    </div>

                    <div class="col-sm-6 col-lg-3 mb-3 mb-sm-0">
                      <strong class="d-block mb-2">Single Pages</strong>

                      <!-- Links -->
                      <ul class="list-unstyled u-list">
                        <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">Single Page Simple</a></li>
                        <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-grid.html">Single Page Grid</a></li>
                        <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-masonry.html">Single Page Masonry</a></li>
                      </ul>
                      <!-- End Links -->
                    </div>

                    <div class="col-sm-6 col-lg-3">
                      <strong class="d-block mb-2">Case Studies</strong>

                      <!-- Links -->
                      <ul class="list-unstyled u-list">
                        <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/case-studies-simple.html">Case Studies Simple</a></li>
                        <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/case-studies-modern.html">Case Studies Modern</a></li>
                      </ul>
                      <!-- End Links -->
                    </div>
                  </div>
                </div>
                <!-- End Works - Mega Menu -->
              </li>
              <!-- End Works -->

              <!-- Blog -->
              <li class="nav-item hs-has-sub-menu u-header__nav-item" data-event="hover" data-animation-in="slideInUp" data-animation-out="fadeOut">
                <a id="blogMegaMenu" class="nav-link u-header__nav-link" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-labelledby="blogSubMenu">
                  Blog
                  <span class="fa fa-angle-down u-header__nav-link-icon"></span>
                </a>

                <!-- Blog - Submenu -->
                <ul id="blogSubMenu" class="list-inline hs-sub-menu u-header__sub-menu py-3 mb-0" style="min-width: 220px; display: none;" aria-labelledby="blogMegaMenu">
                  <!-- Classic -->
                  <li class="dropdown-item hs-has-sub-menu">
                    <a id="navLinkBlogClassic" class="nav-link u-header__sub-menu-nav-link u-list__link py-2" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuBlogClassic">
                      Classic
                      <span class="fa fa-angle-right u-header__sub-menu-nav-link-icon"></span>
                    </a>

                    <!-- Submenu (level 2) -->
                    <ul id="navSubmenuBlogClassic" class="hs-sub-menu list-unstyled u-header__sub-menu u-header__sub-menu-menu-gutter--y u-header__sub-menu-offset" style="min-width: 220px; display: none;" aria-labelledby="navLinkBlogClassic">
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/blog/classic-left-sidebar.html">Left Sidebar</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/blog/classic-right-sidebar.html">Right Sidebar</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/blog/classic-full-width.html">Full Width</a>
                      </li>
                    </ul>
                    <!-- End Submenu (level 2) -->
                  </li>
                  <!-- Classic -->

                  <!-- Grid -->
                  <li class="dropdown-item hs-has-sub-menu">
                    <a id="navLinkBlogGrid" class="nav-link u-header__sub-menu-nav-link u-list__link py-2" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuBlogGrid">
                      Grid
                      <span class="fa fa-angle-right u-header__sub-menu-nav-link-icon"></span>
                    </a>

                    <!-- Submenu (level 2) -->
                    <ul id="navSubmenuBlogGrid" class="hs-sub-menu list-unstyled u-header__sub-menu u-header__sub-menu-menu-gutter--y u-header__sub-menu-offset" style="min-width: 220px; display: none;" aria-labelledby="navLinkBlogGrid">
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/blog/grid-left-sidebar.html">Left Sidebar</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/blog/grid-right-sidebar.html">Right Sidebar</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/blog/grid-full-width.html">Full Width</a>
                      </li>
                    </ul>
                    <!-- End Submenu (level 2) -->
                  </li>
                  <!-- Grid -->

                  <!-- List -->
                  <li class="dropdown-item hs-has-sub-menu">
                    <a id="navLinkBlogList" class="nav-link u-header__sub-menu-nav-link u-list__link py-2" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuBlogList">
                      List
                      <span class="fa fa-angle-right u-header__sub-menu-nav-link-icon"></span>
                    </a>

                    <!-- Submenu (level 2) -->
                    <ul id="navSubmenuBlogList" class="hs-sub-menu list-unstyled u-header__sub-menu u-header__sub-menu-menu-gutter--y u-header__sub-menu-offset" style="min-width: 220px; display: none;" aria-labelledby="navLinkBlogList">
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/blog/list-left-sidebar.html">Left Sidebar</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/blog/list-right-sidebar.html">Right Sidebar</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/blog/list-full-width.html">Full Width</a>
                      </li>
                    </ul>
                    <!-- End Submenu (level 2) -->
                  </li>
                  <!-- List -->

                  <!-- Modern -->
                  <li class="dropdown-item hs-has-sub-menu">
                    <a id="navLinkBlogCard" class="nav-link u-header__sub-menu-nav-link u-list__link py-2" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuBlogCard">
                      Modern
                      <span class="fa fa-angle-right u-header__sub-menu-nav-link-icon"></span>
                    </a>

                    <!-- Submenu (level 2) -->
                    <ul id="navSubmenuBlogCard" class="hs-sub-menu list-unstyled u-header__sub-menu u-header__sub-menu-menu-gutter--y u-header__sub-menu-offset" style="min-width: 220px; display: none;" aria-labelledby="navLinkBlogCard">
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/blog/modern-left-sidebar.html">Left Sidebar</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/blog/modern-right-sidebar.html">Right Sidebar</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/blog/modern-full-width.html">Full Width</a>
                      </li>
                    </ul>
                    <!-- End Submenu (level 2) -->
                  </li>
                  <!-- Grid Modern -->

                  <!-- Masonry -->
                  <li class="dropdown-item hs-has-sub-menu">
                    <a id="navLinkBlogGridMinimal" class="nav-link u-header__sub-menu-nav-link u-list__link py-2" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuBlogGridMinimal">
                      Masonry
                      <span class="fa fa-angle-right u-header__sub-menu-nav-link-icon"></span>
                    </a>

                    <!-- Submenu (level 2) -->
                    <ul id="navSubmenuBlogGridMinimal" class="hs-sub-menu list-unstyled u-header__sub-menu u-header__sub-menu-menu-gutter--y u-header__sub-menu-offset" style="min-width: 220px; display: none;" aria-labelledby="navLinkBlogGridMinimal">
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/blog/masonry-left-sidebar.html">Left Sidebar</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/blog/masonry-right-sidebar.html">Right Sidebar</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/blog/masonry-full-width.html">Full Width</a>
                      </li>
                    </ul>
                    <!-- End Submenu (level 2) -->
                  </li>
                  <!-- Masonry -->

                  <!-- Single Article -->
                  <li class="dropdown-item hs-has-sub-menu">
                    <a id="navLinkBlogGridMasonry" class="nav-link u-header__sub-menu-nav-link u-list__link py-2" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuBlogGridMasonry">
                      Single Article
                      <span class="fa fa-angle-right u-header__sub-menu-nav-link-icon"></span>
                    </a>

                    <!-- Submenu (level 2) -->
                    <ul id="navSubmenuBlogGridMasonry" class="hs-sub-menu list-unstyled u-header__sub-menu u-header__sub-menu-menu-gutter--y u-header__sub-menu-offset" style="min-width: 220px; display: none;" aria-labelledby="navLinkBlogGridMasonry">
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/blog/single-article-classic.html">Classic</a>
                      </li>
                      <li class="dropdown-item px-0">
                        <a class="nav-link u-list__link px-4" href="https://htmlstream.com/preview/front-v1.2/html/blog/single-article-simple.html">Simple</a>
                      </li>
                    </ul>
                    <!-- End Submenu (level 2) -->
                  </li>
                  <!-- Single Article -->
                </ul>
                <!-- End Submenu -->
              </li>
              <!-- End Blog -->

              <!-- Shop -->
              <li class="nav-item hs-has-mega-menu u-header__nav-item" data-event="hover" data-animation-in="slideInUp" data-animation-out="fadeOut" data-max-width="440px" data-position="right">
                <a id="shopMegaMenu" class="nav-link u-header__nav-link" href="javascript:;" aria-haspopup="true" aria-expanded="false">
                  Shop
                  <span class="fa fa-angle-down u-header__nav-link-icon"></span>
                </a>

                <!-- Shop - Mega Menu -->
                <div class="hs-mega-menu u-header__sub-menu" aria-labelledby="shopMegaMenu" style="display: none;">
                  <div class="u-header__mega-menu-wrapper-v1">
                    <strong class="d-block mb-2">Shop Elements</strong>

                    <div class="row">
                      <div class="col-sm-6">
                        <!-- Links -->
                        <ul class="list-unstyled u-list">
                          <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/shop/classic.html">Classic</a></li>
                          <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/shop/masonry.html">Masonry</a></li>
                          <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/shop/single-product.html">Single Product</a></li>
                        </ul>
                        <!-- End Links -->
                      </div>

                      <div class="col-sm-6">
                        <!-- Links -->
                        <ul class="list-unstyled u-list">
                          <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/shop/cart.html">Cart</a></li>
                          <li><a class="nav-link u-list__link py-2 px-0" href="https://htmlstream.com/preview/front-v1.2/html/shop/checkout.html">Checkout</a></li>
                        </ul>
                        <!-- End Links -->
                      </div>
                    </div>
                  </div>

                  <!-- Mega Menu Banner -->
                  <div class="d-none d-md-block u-header__banner-v2 pr-4">
                    <div class="d-flex align-items-end">
                      <img class="img-fluid mr-4" src="./Template_files/img4.png" alt="Image Description" style="width: 200px;">
                      <div class="py-4">
                        <div class="mb-4">
                          <strong class="d-block u-header__banner-v2-title mb-2">Win T-shirt</strong>
                          <span class="d-block u-header__banner-v2-text">Win one of our Front brand T-shirts.</span>
                        </div>
                        <a class="btn btn-sm u-btn-primary--air transition-3d-hover" href="https://htmlstream.com/preview/front-v1.2/html/shop/classic.html">Learn More <span class="fa fa-angle-right ml-2"></span></a>
                      </div>
                    </div>
                  </div>
                  <!-- End Mega Menu Banner -->
                </div>
                <!-- End Shop - Mega Menu -->
              </li>
              <!-- End Shop -->

              <!-- Starter - Link -->
              <li class="nav-item">
                <a class="nav-link u-header__nav-link" href="https://htmlstream.com/preview/front-v1.2/starter/index.html">
                  Starter
                </a>
              </li>
              <!-- End Starter - Link -->

              <!-- Button -->
              <li class="nav-item d-none d-md-inline-block pl-3 pr-0">
                <a class="btn btn-sm btn-primary u-btn-primary transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">
                  Buy Now
                </a>
              </li>
              <!-- End Button -->
            </ul>
          </div>
          <!-- End Navigation -->
        </nav>
        <!-- End Nav -->
      </div>
    </div>
  </header>
  <!-- ========== END HEADER ========== -->

  <!-- ========== MAIN ========== -->
  <main id="content" role="main">
    <!-- Hero Section -->
    <div class="position-relative u-bg-light-blue-50 overflow-hidden">
      <div class="container position-relative u-space-4-top u-space-5-top--md u-space-4-bottom z-index-2">
        <div class="w-md-80 w-lg-60 text-center mx-auto">
          <h1 class="display-4 font-size-48--md-down text-primary">Portfolio <span class="font-weight-bold">card</span></h1>
          <p class="lead">Your portfolio should tell your story.</p>
        </div>
      </div>

      <!-- SVG Background Left Top Shape -->
      <figure class="w-100 w-md-75 w-lg-50 position-absolute-top-left-0 mx-auto">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 900 919" style="enable-background:new 0 0 900 919;" xml:space="preserve">
          <lineargradient id="heroPathID1" gradientUnits="userSpaceOnUse" x1="0" y1="501" x2="599" y2="501">
            <stop class="u-stop-color-midnightblue" offset="7.500810e-08"></stop>
            <stop class="u-stop-color-primary" offset="1"></stop>
          </lineargradient>
          <path fill="url(#heroPathID1)" d="M599,83c0,0-552.6,361-597.8,836L0,486.3C0,486.3,232.6,170,599,83z"></path>
          <path class="u-fill-danger" d="M1,919c0,0,164.2-790,683-919H229.8C229.8,0,1,257,1,577V919z"></path>
          <lineargradient id="heroPathID2" gradientUnits="userSpaceOnUse" x1="0" y1="196.5" x2="900" y2="196.5">
            <stop class="u-stop-color-midnightblue" offset="0"></stop>
            <stop class="u-stop-color-primary" offset="1"></stop>
          </lineargradient>
          <path fill="url(#heroPathID2)" d="M197,393c0,0,254-343,703-393H0L197,393z"></path>
          <lineargradient id="heroPathID3" gradientUnits="userSpaceOnUse" x1="0.5" y1="310.75" x2="562.3972" y2="310.75">
            <stop class="u-stop-color-midnightblue" offset="0"></stop>
            <stop class="u-stop-color-primary" offset="1"></stop>
          </lineargradient>
          <path fill="url(#heroPathID3)" d="M0.5,0.5V621c0,0,190.7-441.2,561.9-620.5H0.5z"></path>
        </svg>
      </figure>
      <!-- End SVG Background Left Top Shape -->

      <!-- SVG Background -->
      <figure class="position-absolute-bottom-0">
        <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="140px" viewBox="20 -20 300 100" style="margin-bottom: -8px;" xml:space="preserve">
          <path class="u-fill-primary" opacity=".075" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
      c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z"></path>
          <path class="u-fill-primary" opacity=".075" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
      c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z"></path>
          <path class="u-fill-primary" opacity="0" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
      H42.401L43.415,98.342z"></path>
          <path class="u-fill-white" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
      c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z"></path>
        </svg>
      </figure>
      <!-- End SVG Background Section -->
    </div>
    <!-- End Hero Section -->

    <!-- Portfolio Section -->
    <div class="container u-space-3">
      <div class="u-cubeportfolio">
        <!-- Filter -->
        <ul id="filterControls" class="list-inline cbp-l-filters-alignRight text-center">
          <li class="list-inline-item cbp-filter-item u-cubeportfolio__item" data-filter="*">All</li>
          <li class="list-inline-item cbp-filter-item u-cubeportfolio__item" data-filter=".branding">Branding</li>
          <li class="list-inline-item cbp-filter-item u-cubeportfolio__item" data-filter=".abstract">Abstract</li>
          <li class="list-inline-item cbp-filter-item u-cubeportfolio__item" data-filter=".graphic">Graphic</li>
          <li class="list-inline-item cbp-filter-item u-cubeportfolio__item cbp-filter-item-active" data-filter=".illustration">Illustration</li>
        </ul>
        <!-- End Filter -->

        <!-- Content -->
        <div class="cbp cbp-caption-active cbp-caption-overlayBottomAlong cbp-ready" data-layout="grid" data-controls="#filterControls" data-animation="quicksand" data-x-gap="32" data-y-gap="32" data-media-queries='[{"width": 1500, "cols": 4},{"width": 1100, "cols": 4},{"width": 800, "cols": 3},{"width": 480, "cols": 2},{"width": 300, "cols": 1}]' style="height: 666px;"><div class="cbp-wrapper-outer"><div class="cbp-wrapper">
          <!-- Item -->
          <div class="cbp-item graphic cbp-item-off" style="width: 253px; left: 0px; top: 0px;"><div class="cbp-item-wrapper">
            <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
              <img class="rounded" src="./Template_files/img1.jpg" alt="Image Description">
              <div class="py-3">
                <h4 class="h6 text-dark mb-0">Remind Me More</h4>
                <p class="small mb-0">
                  by Tiberiu Neamu
                </p>
              </div>
            </a>
          </div></div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item branding cbp-item-off" style="width: 253px; left: 0px; top: 0px;"><div class="cbp-item-wrapper">
            <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
              <img class="rounded" src="./Template_files/img2.jpg" alt="Image Description">
              <div class="py-3">
                <h4 class="h6 text-dark mb-0">Workout Buddy</h4>
                <p class="small mb-0">
                  by Tiberiu Neamu
                </p>
              </div>
            </a>
          </div></div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item abstract illustration" style="width: 253px; left: 0px; top: 0px;"><div class="cbp-item-wrapper">
            <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
              <img class="rounded" src="./Template_files/img3.jpg" alt="Image Description">
              <div class="py-3">
                <h4 class="h6 text-dark mb-0">Tiger</h4>
                <p class="small mb-0">
                  by Cosmin Capitanu
                </p>
              </div>
            </a>
          </div></div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item abstract illustration" style="width: 253px; left: 285px; top: 0px;"><div class="cbp-item-wrapper">
            <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
              <img class="rounded" src="./Template_files/img5.jpg" alt="Image Description">
              <div class="py-3">
                <h4 class="h6 text-dark mb-0">Tiger</h4>
                <p class="small mb-0">
                  by Cosmin Capitanu
                </p>
              </div>
            </a>
          </div></div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item graphic illustration" style="width: 253px; left: 570px; top: 0px;"><div class="cbp-item-wrapper">
            <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
              <img class="rounded" src="./Template_files/img4.jpg" alt="Image Description">
              <div class="py-3">
                <h4 class="h6 text-dark mb-0">Tiger</h4>
                <p class="small mb-0">
                  by Cosmin Capitanu
                </p>
              </div>
            </a>
          </div></div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item graphic illustration" style="width: 253px; left: 855px; top: 0px;"><div class="cbp-item-wrapper">
            <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
              <img class="rounded" src="./Template_files/img6.jpg" alt="Image Description">
              <div class="py-3">
                <h4 class="h6 text-dark mb-0">Tiger</h4>
                <p class="small mb-0">
                  by Cosmin Capitanu
                </p>
              </div>
            </a>
          </div></div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item branding cbp-item-off" style="width: 253px; left: 285px; top: 0px;"><div class="cbp-item-wrapper">
            <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
              <img class="rounded" src="./Template_files/img18.jpg" alt="Image Description">
              <div class="py-3">
                <h4 class="h6 text-dark mb-0">Workout Buddy</h4>
                <p class="small mb-0">
                  by Tiberiu Neamu
                </p>
              </div>
            </a>
          </div></div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item abstract illustration" style="width: 253px; left: 0px; top: 349px;"><div class="cbp-item-wrapper">
            <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
              <img class="rounded" src="./Template_files/img12.jpg" alt="Image Description">
              <div class="py-3">
                <h4 class="h6 text-dark mb-0">Tiger</h4>
                <p class="small mb-0">
                  by Cosmin Capitanu
                </p>
              </div>
            </a>
          </div></div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item graphic cbp-item-off" style="width: 253px; left: 855px; top: 0px;"><div class="cbp-item-wrapper">
            <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
              <img class="rounded" src="./Template_files/img15.jpg" alt="Image Description">
              <div class="py-3">
                <h4 class="h6 text-dark mb-0">Remind Me More</h4>
                <p class="small mb-0">
                  by Tiberiu Neamu
                </p>
              </div>
            </a>
          </div></div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item branding cbp-item-off" style="width: 253px; left: 570px; top: 0px;"><div class="cbp-item-wrapper">
            <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
              <img class="rounded" src="./Template_files/img17.jpg" alt="Image Description">
              <div class="py-3">
                <h4 class="h6 text-dark mb-0">Workout Buddy</h4>
                <p class="small mb-0">
                  by Tiberiu Neamu
                </p>
              </div>
            </a>
          </div></div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item branding cbp-item-off" style="width: 253px; left: 855px; top: 0px;"><div class="cbp-item-wrapper">
            <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
              <img class="rounded" src="./Template_files/img16.jpg" alt="Image Description">
              <div class="py-3">
                <h4 class="h6 text-dark mb-0">Workout Buddy</h4>
                <p class="small mb-0">
                  by Tiberiu Neamu
                </p>
              </div>
            </a>
          </div></div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item graphic cbp-item-off" style="width: 253px; left: 0px; top: 349px;"><div class="cbp-item-wrapper">
            <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
              <img class="rounded" src="./Template_files/img26.jpg" alt="Image Description">
              <div class="py-3">
                <h4 class="h6 text-dark mb-0">Remind Me More</h4>
                <p class="small mb-0">
                  by Tiberiu Neamu
                </p>
              </div>
            </a>
          </div></div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item abstract cbp-item-off" style="width: 253px; left: 855px; top: 0px;"><div class="cbp-item-wrapper">
            <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
              <img class="rounded" src="./Template_files/img28.jpg" alt="Image Description">
              <div class="py-3">
                <h4 class="h6 text-dark mb-0">Remind Me More</h4>
                <p class="small mb-0">
                  by Tiberiu Neamu
                </p>
              </div>
            </a>
          </div></div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item branding cbp-item-off" style="width: 253px; left: 0px; top: 349px;"><div class="cbp-item-wrapper">
            <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
              <img class="rounded" src="./Template_files/img27.jpg" alt="Image Description">
              <div class="py-3">
                <h4 class="h6 text-dark mb-0">Workout Buddy</h4>
                <p class="small mb-0">
                  by Tiberiu Neamu
                </p>
              </div>
            </a>
          </div></div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item branding cbp-item-off" style="width: 253px; left: 285px; top: 349px;"><div class="cbp-item-wrapper">
            <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
              <img class="rounded" src="./Template_files/img30.jpg" alt="Image Description">
              <div class="py-3">
                <h4 class="h6 text-dark mb-0">Workout Buddy</h4>
                <p class="small mb-0">
                  by Tiberiu Neamu
                </p>
              </div>
            </a>
          </div></div>
          <!-- End Item -->

          <!-- Item -->
          <div class="cbp-item graphic cbp-item-off" style="width: 253px; left: 285px; top: 349px;"><div class="cbp-item-wrapper">
            <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
              <img class="rounded" src="./Template_files/img29.jpg" alt="Image Description">
              <div class="py-3">
                <h4 class="h6 text-dark mb-0">Remind Me More</h4>
                <p class="small mb-0">
                  by Tiberiu Neamu
                </p>
              </div>
            </a>
          </div></div>
          <!-- End Item -->
        </div></div></div>
        <!-- End Content -->
      </div>
    </div>
    <!-- End Portfolio Section -->

    <!-- Contact Us Section -->
    <div class="u-gradient-half-primary-v1">
      <div class="container u-space-3-top u-space-4-bottom">
        <div class="row justify-content-md-between align-items-md-start">
          <div class="col-md-6 mb-7 mb-md-0">
            <h2 class="text-white mb-5">You wish us<br>to talk about <span class="font-weight-bold">your project</span>?</h2>
            <a class="h4 u-link-light" href="mailto:support@htmlstream.com">support@htmlstream.com</a>
          </div>

          <div class="col-md-6 mt-md-auto text-md-right">
            <!-- Social Networks -->
            <ul class="list-inline">
              <li class="list-inline-item">
                <a class="u-bg-transparent u-icon u-icon-light--air" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">
                  <span class="fab fa-facebook-f u-icon__inner"></span>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="u-bg-transparent u-icon u-icon-light--air" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">
                  <span class="fab fa-google u-icon__inner"></span>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="u-bg-transparent u-icon u-icon-light--air" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">
                  <span class="fab fa-twitter u-icon__inner"></span>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="u-bg-transparent u-icon u-icon-light--air" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">
                  <span class="fab fa-github u-icon__inner"></span>
                </a>
              </li>
            </ul>
            <!-- End Social Networks -->

            <span class="h4 u-text-light">+1 (062) 109-9222</span>
          </div>
        </div>
      </div>
    </div>
    <!-- End Contact Us Section -->

    <!-- SVG Background -->
    <figure class="position-absolute-bottom-0 z-index-2">
      <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="140px" viewBox="20 -20 300 100" style="margin-bottom: -8px;" xml:space="preserve">
        <path class="u-fill-white" opacity="0.4" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
    c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z"></path>
        <path class="u-fill-white" opacity="0.4" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
    c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z"></path>
        <path class="u-fill-white" opacity="0" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
    H42.401L43.415,98.342z"></path>
        <path class="u-fill-white" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
    c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z"></path>
      </svg>
    </figure>
    <!-- End SVG Background Section -->
  </main>
  <!-- ========== END MAIN ========== -->

  <!-- ========== FOOTER ========== -->
  <footer>
    <!-- Lists -->
    <div class="container u-space-2">
      <div class="row justify-content-md-between">
        <div class="col-sm-4 col-lg-2 mb-4 mb-lg-0">
          <h3 class="h6">
            <strong>About</strong>
          </h3>

          <!-- List -->
          <ul class="list-unstyled mb-0">
            <li><a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/pages/about-agency.html">Agency</a></li>
            <li><a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/pages/about-start-up.html">Start-Up</a></li>
            <li><a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">Business</a></li>
          </ul>
          <!-- End List -->
        </div>

        <div class="col-sm-4 col-lg-2 mb-4 mb-lg-0">
          <h3 class="h6">
            <strong>Services</strong>
          </h3>

          <!-- List -->
          <ul class="list-unstyled mb-0">
            <li><a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/pages/services-agency.html">Agency</a></li>
            <li><a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/pages/services-start-up.html">Start-Up</a></li>
            <li><a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">Business</a></li>
          </ul>
          <!-- End List -->
        </div>

        <div class="col-sm-4 col-lg-2 mb-4 mb-lg-0">
          <h3 class="h6">
            <strong>Account</strong>
          </h3>

          <!-- List -->
          <ul class="list-unstyled mb-0">
            <li><a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">Profile</a></li>
            <li><a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">User Contacts</a></li>
            <li><a class="u-list__link" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">Projects</a></li>
          </ul>
          <!-- End List -->
        </div>

        <div class="col-md-6 col-lg-4">
          <h3 class="h6 mb-4">
            <strong>We are driven to deliver results for all your businesses.</strong>
          </h3>

          <!-- Button -->
          <button type="button" class="btn btn-xs btn-dark u-btn-dark u-btn-wide transition-3d-hover text-left mb-2">
            <span class="media align-items-center">
              <span class="d-flex mr-3">
                <span class="fab fa-apple font-size-26"></span>
              </span>
              <span class="media-body">
                <span class="d-block">Download on the</span>
                <strong class="font-size-14">App Store</strong>
              </span>
            </span>
          </button>
          <!-- End Button -->

          <!-- Button -->
          <button type="button" class="btn btn-xs btn-dark u-btn-dark u-btn-wide transition-3d-hover text-left mb-2">
            <span class="media align-items-center">
              <span class="d-flex mr-3">
                <span class="fab fa-google-play font-size-26"></span>
              </span>
              <span class="media-body">
                <span class="d-block">Get it on</span>
                <strong class="font-size-14">Google Play</strong>
              </span>
            </span>
          </button>
          <!-- End Button -->
        </div>
      </div>
    </div>
    <!-- End Lists -->

    <hr>

    <!-- Copyright -->
    <div class="container text-center u-space-1">
      <!-- Logo -->
      <a class="d-inline-block mb-2" href="https://htmlstream.com/preview/front-v1.2/html/home/index.html" aria-label="Front">
        <img src="./Template_files/logo.svg" alt="Logo" style="width: 120px;">
      </a>
      <!-- End Logo -->

      <p class="small text-muted">© Front. 2018 Htmlstream. All rights reserved.</p>
    </div>
    <!-- End Copyright -->
  </footer>
  <!-- ========== END FOOTER ========== -->

  <!-- ========== SECONDARY CONTENTS ========== -->
  <!-- Account Sidebar Navigation -->
  <aside id="sidebarContent" class="u-sidebar u-unfold--css-animation u-unfold--hidden fadeOutRight" aria-labelledby="sidebarNavToggler" style="animation-duration: 500ms; right: 0px;">
    <div class="u-sidebar__scroller">
      <div class="u-sidebar__container">
        <div class="u-header-sidebar__footer-offset">
          <!-- Toggle Button -->
          <div class="d-flex align-items-center pt-4 px-7">
            <button type="button" class="close ml-auto target-of-invoker-has-unfolds" aria-controls="sidebarContent" aria-haspopup="true" aria-expanded="false" data-unfold-event="click" data-unfold-hide-on-scroll="false" data-unfold-target="#sidebarContent" data-unfold-type="css-animation" data-unfold-animation-in="fadeInRight" data-unfold-animation-out="fadeOutRight" data-unfold-duration="500">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <!-- End Toggle Button -->

          <!-- Content -->
          <div class="js-scrollbar u-sidebar__body mCustomScrollbar _mCS_1 mCS-autoHide mCS_no_scrollbar" style="position: relative; overflow: visible;"><div id="mCSB_1" class="mCustomScrollBox mCS-minimal-dark mCSB_vertical mCSB_outside" style="max-height: none;" tabindex="0"><div id="mCSB_1_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="ltr">
            <div class="u-sidebar__content u-header-sidebar__content">
              <form class="js-validate" novalidate="novalidate">
                <!-- Login -->
                <div id="login" data-target-group="idForm">
                  <!-- Title -->
                  <header class="text-center mb-7">
                    <h2 class="h4 mb-0">Welcome Back!</h2>
                    <p>Login to manage your account.</p>
                  </header>
                  <!-- End Title -->

                  <!-- Input -->
                  <div class="js-form-message mb-4">
                    <div class="js-focus-state input-group u-form">
                      <div class="input-group-prepend u-form__prepend">
                        <span class="input-group-text u-form__text">
                          <span class="fa fa-user u-form__text-inner"></span>
                        </span>
                      </div>
                      <input type="email" class="form-control u-form__input" name="email" required="" placeholder="Email" aria-label="Email" data-msg="Please enter a valid email address." data-error-class="u-has-error" data-success-class="u-has-success">
                    </div>
                  </div>
                  <!-- End Input -->

                  <!-- Input -->
                  <div class="js-form-message mb-2">
                    <div class="js-focus-state input-group u-form">
                      <div class="input-group-prepend u-form__prepend">
                        <span class="input-group-text u-form__text">
                          <span class="fa fa-lock u-form__text-inner"></span>
                        </span>
                      </div>
                      <input type="password" class="form-control u-form__input" name="password" required="" placeholder="Password" aria-label="Password" data-msg="Your password is invalid. Please try again." data-error-class="u-has-error" data-success-class="u-has-success">
                    </div>
                  </div>
                  <!-- End Input -->

                  <div class="clearfix mb-4">
                    <a class="js-animation-link float-right small u-link-muted" href="javascript:;" data-target="#forgotPassword" data-link-group="idForm" data-animation-in="slideInUp">Forgot Password?</a>
                  </div>

                  <div class="mb-2">
                    <button type="submit" class="btn btn-block btn-primary u-btn-primary transition-3d-hover">Login</button>
                  </div>

                  <div class="text-center mb-4">
                    <span class="small text-muted">Do not have an account?</span>
                    <a class="js-animation-link small" href="javascript:;" data-target="#signup" data-link-group="idForm" data-animation-in="slideInUp">Signup
                    </a>
                  </div>

                  <div class="text-center">
                    <span class="u-divider u-divider--xs u-divider--text mb-4">OR</span>
                  </div>

                  <!-- Login Buttons -->
                  <div class="d-flex">
                    <a class="btn btn-block btn-sm u-btn-facebook--air transition-3d-hover mr-1" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">
                      <span class="fab fa-facebook-square mr-1"></span>
                      Facebook
                    </a>
                    <a class="btn btn-block btn-sm u-btn-google--air transition-3d-hover ml-1 mt-0" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">
                      <span class="fab fa-google mr-1"></span>
                      Google
                    </a>
                  </div>
                  <!-- End Login Buttons -->
                </div>

                <!-- Signup -->
                <div id="signup" style="display: none; opacity: 0;" data-target-group="idForm">
                  <!-- Title -->
                  <header class="text-center mb-7">
                    <h2 class="h4 mb-0">Welcome to Front.</h2>
                    <p>Fill out the form to get started.</p>
                  </header>
                  <!-- End Title -->

                  <!-- Input -->
                  <div class="js-form-message mb-4">
                    <div class="js-focus-state input-group u-form">
                      <div class="input-group-prepend u-form__prepend">
                        <span class="input-group-text u-form__text">
                          <span class="fa fa-user u-form__text-inner"></span>
                        </span>
                      </div>
                      <input type="email" class="form-control u-form__input" name="email" required="" placeholder="Email" aria-label="Email" data-msg="Please enter a valid email address." data-error-class="u-has-error" data-success-class="u-has-success">
                    </div>
                  </div>
                  <!-- End Input -->

                  <!-- Input -->
                  <div class="js-form-message mb-4">
                    <div class="js-focus-state input-group u-form">
                      <div class="input-group-prepend u-form__prepend">
                        <span class="input-group-text u-form__text">
                          <span class="fa fa-lock u-form__text-inner"></span>
                        </span>
                      </div>
                      <input type="password" class="form-control u-form__input" name="password" required="" placeholder="Password" aria-label="Password" data-msg="Your password is invalid. Please try again." data-error-class="u-has-error" data-success-class="u-has-success">
                    </div>
                  </div>
                  <!-- End Input -->

                  <!-- Input -->
                  <div class="js-form-message mb-4">
                    <div class="js-focus-state input-group u-form">
                      <div class="input-group-prepend u-form__prepend">
                        <span class="input-group-text u-form__text">
                          <span class="fa fa-key u-form__text-inner"></span>
                        </span>
                      </div>
                      <input type="password" class="form-control u-form__input" name="confirmPassword" required="" placeholder="Confirm Password" aria-label="Confirm Password" data-msg="Password does not match the confirm password." data-error-class="u-has-error" data-success-class="u-has-success">
                    </div>
                  </div>
                  <!-- End Input -->

                  <div class="mb-2">
                    <button type="submit" class="btn btn-block btn-primary u-btn-primary transition-3d-hover">Get Started</button>
                  </div>

                  <div class="text-center mb-4">
                    <span class="small text-muted">Already have an account?</span>
                    <a class="js-animation-link small" href="javascript:;" data-target="#login" data-link-group="idForm" data-animation-in="slideInUp">Login
                    </a>
                  </div>

                  <div class="text-center">
                    <span class="u-divider u-divider--xs u-divider--text mb-4">OR</span>
                  </div>

                  <!-- Login Buttons -->
                  <div class="d-flex">
                    <a class="btn btn-block btn-sm u-btn-facebook--air transition-3d-hover mr-1" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">
                      <span class="fab fa-facebook-square mr-1"></span>
                      Facebook
                    </a>
                    <a class="btn btn-block btn-sm u-btn-google--air transition-3d-hover ml-1 mt-0" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#">
                      <span class="fab fa-google mr-1"></span>
                      Google
                    </a>
                  </div>
                  <!-- End Login Buttons -->
                </div>
                <!-- End Signup -->

                <!-- Forgot Password -->
                <div id="forgotPassword" style="display: none; opacity: 0;" data-target-group="idForm">
                  <!-- Title -->
                  <header class="text-center mb-7">
                    <h2 class="h4 mb-0">Recover Password.</h2>
                    <p>Enter your email address and an email with instructions will be sent to you.</p>
                  </header>
                  <!-- End Title -->

                  <!-- Input -->
                  <div class="js-form-message mb-4">
                    <div class="js-focus-state input-group u-form">
                      <div class="input-group-prepend u-form__prepend">
                        <span class="input-group-text u-form__text">
                          <span class="fas fa-envelope u-inner-form__text"></span>
                        </span>
                      </div>
                      <input type="email" class="form-control u-form__input" name="email" required="" placeholder="Your email" aria-label="Your email" data-msg="Please enter a valid email address." data-error-class="u-has-error" data-success-class="u-has-success">
                    </div>
                  </div>
                  <!-- End Input -->

                  <div class="mb-2">
                    <button type="submit" class="btn btn-block btn-primary u-btn-primary transition-3d-hover">Recover Password</button>
                  </div>

                  <div class="text-center mb-4">
                    <span class="small text-muted">Remember your password?</span>
                    <a class="js-animation-link small" href="javascript:;" data-target="#login" data-link-group="idForm" data-animation-in="slideInUp">Login
                    </a>
                  </div>
                </div>
                <!-- End Forgot Password -->
              </form>
            </div>
          </div></div><div id="mCSB_1_scrollbar_vertical" class="mCSB_scrollTools mCSB_1_scrollbar mCS-minimal-dark mCSB_scrollTools_vertical" style="display: none;"><div class="mCSB_draggerContainer"><div id="mCSB_1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 50px; top: 0px;"><div class="mCSB_dragger_bar" style="line-height: 50px;"></div></div><div class="mCSB_draggerRail"></div></div></div></div>
          <!-- End Content -->
        </div>

        <!-- Footer -->
        <footer class="u-sidebar__footer u-sidebar__footer--account">
          <ul class="list-inline mb-0">
            <li class="list-inline-item pr-3">
              <a class="u-sidebar__footer--account__text" href="https://htmlstream.com/preview/front-v1.2/html/pages/privacy.html">Privacy</a>
            </li>
            <li class="list-inline-item pr-3">
              <a class="u-sidebar__footer--account__text" href="https://htmlstream.com/preview/front-v1.2/html/pages/terms.html">Terms</a>
            </li>
            <li class="list-inline-item">
              <a class="u-sidebar__footer--account__text" href="https://htmlstream.com/preview/front-v1.2/html/pages/help.html">
                <i class="fa fa-info-circle"></i>
              </a>
            </li>
          </ul>

          <!-- SVG Background Shape -->
          <div class="position-absolute-bottom-0">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 126.5" style="margin-bottom: -5px; enable-background:new 0 0 300 126.5;" xml:space="preserve">
              <path class="u-fill-primary" opacity=".6" d="M0,58.9c0-0.9,5.1-2,5.8-2.2c6-0.8,11.8,2.2,17.2,4.6c4.5,2.1,8.6,5.3,13.3,7.1C48.2,73.3,61,73.8,73,69
                c43-16.9,40-7.9,84-2.2c44,5.7,83-31.5,143-10.1v69.8H0C0,126.5,0,59,0,58.9z"></path>
              <path class="u-fill-primary" d="M300,68.5v58H0v-58c0,0,43-16.7,82,5.6c12.4,7.1,26.5,9.6,40.2,5.9c7.5-2.1,14.5-6.1,20.9-11
                c6.2-4.7,12-10.4,18.8-13.8c7.3-3.8,15.6-5.2,23.6-5.2c16.1,0.1,30.7,8.2,45,16.1c13.4,7.4,28.1,12.2,43.3,11.2
                C282.5,76.7,292.7,74.4,300,68.5z"></path>
              <circle class="u-fill-danger" cx="259.5" cy="17" r="13"></circle>
              <circle class="u-fill-primary" cx="290" cy="35.5" r="8.5"></circle>
              <circle class="u-fill-success" cx="288" cy="5.5" r="5.5"></circle>
              <circle class="u-fill-warning" cx="232.5" cy="34" r="2"></circle>
            </svg>
          </div>
          <!-- End SVG Background Shape -->
        </footer>
        <!-- End Footer -->
      </div>
    </div>
  </aside>
  <!-- End Account Sidebar Navigation -->
  <!-- ========== END SECONDARY CONTENTS ========== -->

  <!-- Go to Top -->
  <a class="js-go-to u-go-to animated js-animation-was-fired slideInUp" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/boxed-classic.html#" data-position='{"bottom": 15, "right": 15 }' data-type="fixed" data-offset-top="400" data-compensation="#header" data-show-effect="slideInUp" data-hide-effect="slideOutDown" style="display: inline-block; position: fixed; bottom: 15px; right: 15px;">
    <span class="fa fa-arrow-up u-go-to__inner"></span>
  </a>
  <!-- End Go to Top -->

  <!-- JS Global Compulsory -->
  <script src="./Template_files/jquery.min.js"></script>
  <script src="./Template_files/jquery.mousewheel.min.js"></script>
  <script src="./Template_files/jquery-migrate.min.js"></script>
  <script src="./Template_files/popper.min.js"></script>
  <script src="./Template_files/bootstrap.min.js"></script>

  <!-- JS Implementing Plugins -->
  <script src="./Template_files/hs.megamenu.js"></script>
  <script src="./Template_files/jquery.mCustomScrollbar.concat.min.js"></script>
  <script src="./Template_files/jquery.validate.min.js"></script>
  <script src="./Template_files/jquery.cubeportfolio.min.js"></script>

  <!-- JS Front -->
  <script src="./Template_files/hs.core.js"></script>
  <script src="./Template_files/hs.header.js"></script>
  <script src="./Template_files/hs.unfold.js"></script>
  <script src="./Template_files/hs.malihu-scrollbar.js"></script>
  <script src="./Template_files/hs.validation.js"></script>
  <script src="./Template_files/hs.focus-state.js"></script>
  <script src="./Template_files/hs.show-animation.js"></script>
  <script src="./Template_files/hs.cubeportfolio.js"></script>
  <script src="./Template_files/hs.go-to.js"></script>

  <!-- JS Plugins Init. -->
  <script>
   
    $(window).on('load', function () {
      // initialization of HSMegaMenu component
      $('.js-mega-menu').HSMegaMenu({
        event: 'hover',
        pageContainer: $('.container'),
        breakpoint: 768,
        hideTimeOut: 0
      });
    });

    $(document).on('ready', function () {
      // initialization of header
      $.HSCore.components.HSHeader.init($('#header'));

      // initialization of unfold component
      $.HSCore.components.HSUnfold.init($('[data-unfold-target]'), {
        afterOpen: function () {
          $(this).find('input[type="search"]').focus();
        }
      });

      // initialization of malihu scrollbar
      $.HSCore.components.HSMalihuScrollBar.init($('.js-scrollbar'));

      // initialization of show animations
      $.HSCore.components.HSShowAnimation.init('.js-animation-link');

      // initialization of form validation
      $.HSCore.components.HSValidation.init('.js-validate', {
        rules: {
          confirmPassword: {
            equalTo: '#password'
          }
        }
      });

      // initialization of forms
      $.HSCore.helpers.HSFocusState.init();

      // initialization of cubeportfolio
      $.HSCore.components.HSCubeportfolio.init('.cbp');

      // initialization of go to
      $.HSCore.components.HSGoTo.init('.js-go-to');
    });
  </script>

</body></html>